<template>
  <div class='alipay-config-page'>
    <page-header-wrapper>
      <a-card :bordered='false'>
        <template>
          <div class='content'>
            <div class='main'>
              <template v-if='parseInt(params.batch_status) >= 3'>
                <a-alert
                  v-if='params.batch_status === "8"'
                  type="error"
                  :message="params.fail_reason"
                  banner
                />
                <a-alert
                  v-else
                  :message="params.fail_reason"
                  banner
                /><br />
              </template>

              <a-descriptions size='small' :column='1'>
                <a-descriptions-item label='授权应用'>
                  <a-button
                    type='primary'
                    html-type='submit'
                    v-if='params.status !== "1"'
                    @click='getParams'
                  >
                    去授权
                  </a-button>
                  <span v-else>
                    已授权
                  </span>
                </a-descriptions-item>
                <template v-if='params.status === "1"'>
                  <a-descriptions-item label='签约状态'>
                    <a-button
                      type='primary'
                      html-type='submit'
                      v-if='
                    params.batch_status === "0" ||
                    params.batch_status === "1" ||
                    params.batch_status === "4" ||
                    params.batch_status === "7" ||
                    params.batch_status === "8"
                    '
                      @click='showAppInfo'
                    >
                      {{ batch_msg }}
                    </a-button>
                    <span v-else>
                    {{ batch_msg }}
                  </span>
                  </a-descriptions-item>
                  <template v-if='parseInt(params.batch_status) >= 3'>
                    <a-descriptions-item label='营业执照' v-if='params.license_pic'>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="params.license_pic"
                        fit="fill"></el-image>
                    </a-descriptions-item>
                    <a-descriptions-item label='企业编码' v-if='params.license_no'>
                      {{params.license_no}}
                    </a-descriptions-item>
                    <a-descriptions-item label='商户姓名' v-if='params.contact_name'>
                      {{params.contact_name}}
                    </a-descriptions-item>
                    <a-descriptions-item label='支付宝账户' v-if='params.account'>
                      {{params.account}}
                    </a-descriptions-item>
                    <a-descriptions-item label='联系电话' v-if='params.contact_mobile'>
                      {{params.contact_mobile}}
                    </a-descriptions-item>
                    <a-descriptions-item label='邮箱地址' v-if='params.contact_email'>
                      {{params.contact_email}}
                    </a-descriptions-item>
                    <a-descriptions-item label='特殊资质证书' v-if='params.other_data'>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="params.other_data"
                        fit="fill"></el-image>
                    </a-descriptions-item>
                  </template>

                </template>

              </a-descriptions>
            </div>
          </div>
        </template>
      </a-card>
    </page-header-wrapper>
    <a-modal
      destroyOnClose
      title='授权链接'
      v-model='showParams'
      ok-text='确认'
      cancel-text='取消'
      @ok='paramsModal'
      @cancel='paramsModal'
    >
      <img :src='paramsUrl' width='300'>
    </a-modal>

    <a-modal
      ref='appForm'
      v-model='appInfoModal'
      title='填写资料'
      ok-text='提交'
      :confirmLoading='confirmLoading'
      @ok='confirmAppInfo'
      @cancel='showAppInfo'
    >
      <a-form-model :model='params' :label-col='labelCol' :wrapper-col='wrapperCol'>
        <a-form-model-item label='营业执照' required='true'>
          <cyyUploadImg
            @uploadSuccess='uploadSuccess'
            @deleteImg="params.license_pic = ''"
            :imgSrc='params.license_pic'
          >
          </cyyUploadImg>
        </a-form-model-item>
        <a-form-model-item label='企业编码' required='true'>
          <a-input required v-model='params.license_no' />
        </a-form-model-item>
        <a-form-model-item label='商户姓名' required='true'>
          <a-input v-model='params.contact_name' />
        </a-form-model-item>
        <a-form-model-item label='支付宝账户' required='true'>
          <a-input v-model='params.account' />
        </a-form-model-item>
        <a-form-model-item label='联系电话' required='true'>
          <a-input v-model='params.contact_mobile' />
        </a-form-model-item>
        <a-form-model-item label='邮箱地址' required='true'>
          <a-input v-model='params.contact_email' />
        </a-form-model-item>
        <a-form-model-item label='特殊资质'>
          <cyyUploadImg
            @uploadSuccess='
            (e) => {
              params.other_data = e.data
            }
          '
            @deleteImg="params.other_data = ''"
            :imgSrc='params.other_data'
          ></cyyUploadImg>
        </a-form-model-item>

      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { getAppPay, getInfo, getParams, getStatus } from '@/api/app.js'
import { cyyUploadImg } from '@/components/CyyUi'
import { ocr } from '@/api/setting/applet'

export default {
  name: 'AppConfig',
  components: {
    cyyUploadImg
  },
  data() {
    return {
      params: {
        status: 0,
        batch_status: 0,
        contact_name: '',
        contact_mobile: '',
        contact_email: '',
        license_no: '',
        license_pic: '',
        other_data: '',
        batch_url: '',
        fail_reason: '',
        account: ''
      },
      showParams: false,
      paramsUrl: '',
      time: '',
      appInfoModal: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      confirmLoading: false
    }
  },
  computed: {
    batch_msg: function() {
      let batch_status = parseInt(this.params.batch_status)
      switch (batch_status) {
        case 2:
          return '已完成'
        case 3:
          return '审核中'
        case 4:
          return '重新签约'
        case 5:
          return '待商户确认，请留意所填写邮箱或手机短信'
        case 6:
          return '商户确认成功，签约完成'
        case 7:
          return '重新开始签约'
        case 8:
          return '重新签约'
        default:
          return '开始签约'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //上传营业执照获取ocr
    uploadSuccess: function(e) {
      this.params.license_pic = e.data
      this.ocr({
        type: 1,
        url: e.data
      }).then((res) => {
        this.params.license_no = res.reg_num
        this.params.contact_name = res.person
      })
    },
    //提交签约信息
    confirmAppInfo: function() {
      this.confirmLoading = true
      let params = {
        contact_name: this.params.contact_name,
        contact_mobile: this.params.contact_mobile,
        contact_email: this.params.contact_email,
        license_no: this.params.license_no,
        license_pic: this.params.license_pic,
        other_data: this.params.other_data,
        account: this.params.account
      }
      getAppPay({ params_info: params }).then((res) => {
        if (res.code === 0) {
          this.showAppInfo()
          this.getData()
        }
        this.confirmLoading = false
      })

    },
    //显示关闭签约弹窗
    showAppInfo: function() {
      this.appInfoModal = !this.appInfoModal
    },
    //获取支付宝码并轮询时候授权完成，关闭弹窗时关闭计时器
    paramsModal: function() {
      this.showParams = !this.showParams
      if (this.showParams) {
        this.time = setInterval(() => {
          this.getStatus()
        }, 2000)
      } else {
        clearInterval(this.time)
      }
    },

    //获取当前商城的app配置
    getData: function() {
      getInfo().then((res) => {
        console.log(res)
        if (res.code === 0 && res.data) {
          this.params = res.data
        }
      })
    },

    //获取二维码链接地址
    getParams: function() {
      getParams().then((res) => {
        if (res.code === 0) {
          this.paramsModal()
          this.paramsUrl = res.url
        }
      })
    },

    //获取app应用授权状态
    getStatus: function() {
      getStatus().then((res) => {
        if (res && res.code === 0) {
          this.showParams = false
          clearInterval(this.time)
          this.getData()
        }
      })
    },
    ocr(data) {
      return new Promise(resolve => {
        ocr(data).then(res => {
          if (res.code === 0) {
            resolve(res.data)
            return
          }

          this.$message.error(res.msg)
        })
      })
    }
  }
}
</script>
<style lang='less' scoped>
.main {
  .fail_reason {
    background: rgba(255, 157, 82, 0.72);
  }
}

</style>
